<template>
    <div style="height:100%;width: 100%" class="dataInfo">
        <bar class="bar" @on-back="$router.back()">{{label}}
            <span v-if="!isSearch" slot="right" style="padding:0 10px" @click="searchBox">筛选</span>
        </bar>
        <div style="height: 45px;" class="dataInfo-timePick youba-primary-grey">
            <span>{{time}}</span>
            <i class="iconfont icon-rili dataInfo-timePick-icon" @click="handleTime"></i>
        </div>
        <scroll style="height: calc(100% - 90px)">
            <div slot="done"></div>
            <div style="overflow: scroll;-webkit-overflow-scrolling : touch; height: calc(100% - 90px)">
                <grid :rows="3" class="dataInfo-grid">
                    <grid-item @on-item-click="onItemClick('one')" :class="selected.one && 'dataInfo-selected'">
                        <div class="home-grid-label" style="font-size:14px">加油总金额(元)</div>
                        <div class="home-grid-number">{{data.dateTotalAmount}}</div>
                    </grid-item>
                    <grid-item @on-item-click="onItemClick('two')" :class="selected.two && 'dataInfo-selected'">
                        <div class="home-grid-label" style="font-size:14px">加油总笔数(笔)</div>
                        <div class="home-grid-number">{{data.dateTotalCount}}</div>
                    </grid-item>
                    <grid-item @on-item-click="onItemClick('three')" :class="selected.three && 'dataInfo-selected'">
                        <div class="home-grid-label" style="font-size:14px">加油总量(L)</div>
                        <div class="home-grid-number">{{data.dateTotalFuel}}</div>
                    </grid-item>
                </grid>
                <div v-show="selected.one">
                    <mu-progress :innerWidth="item.width" :left="item.orderDate" :right="item.amount"
                                 v-for="(item, key) in amounts" :key="key" ref="pp">
                    </mu-progress>
                </div>
                <div v-show="selected.two">
                    <mu-progress :innerWidth="item.width" :left="item.orderDate" :right="item.count"
                                 v-for="(item, key) in counts" :key="key">
                    </mu-progress>
                </div>
                <div v-show="selected.three">
                    <mu-progress :innerWidth="item.width" :left="item.orderDate" :right="item.fuel"
                                 v-for="(item, key) in fuels" :key="key">
                    </mu-progress>
                </div>
            </div>
        </scroll>
    </div>
</template>

<script>
    //加油数据记录
    import scroll from '../../components/scroll.vue'
    import {
        Bar,
        Progress
    } from 'muka-ui'
    import {
        Grid,
        GridItem,
        Popup,
        DatetimePlugin,
        CellBox,
        Tab,
        Group,
        TabItem
    } from 'vux'

    export default {
        name: 'dataInfo',
        components: {
            Bar,
            Grid,
            GridItem,
            'mu-progress': Progress,
            Popup,
            CellBox,
            Tab,
            Group,
            TabItem,
            scroll
        },
        data: function () {
            return {
                isSearch: false,
                showTime: false,
                time: '',
                data: {},
                width: '',
                minWidth: '',
                amounts: [],
                counts: [],
                fuels: [],
                selected: {
                    'one': true,
                    'two': false,
                    'three': false
                },
                detail: [],
                icDetail: [],
                searchText: '',
                select: 1,
                num: 1,
                time: '',
                buy: false,
                buyI: false,
                label: '加油数据',
                tankerDetail: [],
                showSearch: false,
                color: ['#ffd31c', '#7dde30', '#ff6f43', '#299fbb']
            }
        },
        created: function () {
            Date.prototype.format = function (partten) {
                if (partten == null || partten === '') {
                    partten = 'y-m-d'
                }
                let y = this.getFullYear()
                let m = this.getMonth() + 1
                let d = this.getDate()
                let r = partten.replace(/y+/gi, y)
                r = r.replace(/m+/gi, (m < 10 ? '0' : '') + m)
                r = r.replace(/d+/gi, (d < 10 ? '0' : '') + d)
                return r
            }
            let date = new Date()
            this.time = date.format('y-m')
            this.label = '加油数据'
            this.showSearch = false

            if (this.$route.query.cardId) {
                this.cardId = this.$route.query.cardId
                this.label = this.cardId
                this.isSearch = true
            }

            if (this.$route.query.tankerId) {
                this.tankerId = this.$route.query.tankerId
                this.label = this.tankerId
                this.isSearch = true
            }
            this.getData()
        },
        mounted: function () {
        },
        methods: {
            onItemClick: function (key) {
                for (let i in this.selected) {
                    if (i === key) this.selected[i] = true
                    else this.selected[i] = false
                }
            },
            getData: function () {
                this.$ajax(
                    'data/fuelMonth',
                    {
                        cardId: this.cardId,
                        tankerId: this.tankerId,
                        month: this.time
                    },
                    (content) => {
                        this.setData(content)
                    },true)
            },
            searchBox: function () {
                this.$router.push('/fuelDataSearch')
            },
            setData: function (content) {

                this.data = content
                let maxAmount = Number(Math.max.apply(this, content.statistics.map(item => item.totalAmount)))
                let maxCount = Number(Math.max.apply(this, content.statistics.map(item => item.totalCount)))
                let maxFuel = Number(Math.max.apply(this, content.statistics.map(item => item.totalFuel)))

                this.amounts = content.statistics.map(item => {
                    return {
                        orderDate: item.orderDate,
                        amount: item.totalAmount,
                        width: Number(item.totalAmount) ? 'calc(140px + (100% - 140px) * ' + item.totalAmount + ' / ' + maxAmount + ')'
                            : '140px'

                    }
                })
                this.counts = content.statistics.map(item => {
                    return {
                        orderDate: item.orderDate,
                        count: item.totalCount,
                        width: Number(item.totalCount) ? 'calc(140px + (100% - 140px) * ' + item.totalCount + ' / ' + maxCount + ')'
                            : '140px'

                    }
                })
                this.fuels = content.statistics.map(item => {
                    return {
                        orderDate: item.orderDate,
                        fuel: item.totalFuel,
                        width: Number(item.totalFuel) ? 'calc(140px + (100% - 140px) * ' + item.totalFuel + ' / ' + maxFuel + ')'
                            : '140px'
                    }
                })
            },
            handleTime: function () {
                this.$vux.datetime.show({
                    cancelText: '取消',
                    confirmText: '确定',
                    format: 'YYYY-MM',
                    value: this.time,
                    onConfirm: async (val) => {
                        this.time = val
                        this.getData()
                    }
                })
            }
        }
    }

</script>

<style lang="less">
    .dataInfo {
        .detail-block-box {
            height: 40px;
        }
        .detail-cell-box {
            position: absolute;
            width: 92%;
            top: 10px;
        }
        .weui-cells:first-child {
            margin-top: 0px;
        }
        .weui-cell {
            line-height: 20px;
        }
        .detail-box-name {
            line-height: 40px;
            height: 40px;
            color: white;
            width: 40px;
            border-radius: 50%;
            text-align: center;
        }
    }

</style>
